<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 502 499"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect fill="#002F5C" rx="40" height="158.695" width="133.915" y="97.552" x="88.16"/><rect fill="#06F" rx="39" height="232.506" width="196.128" y="140.151" x="170.383"/><path fill="#002F5C" d="M355.703 326.788c10.982 7.241 21.969 13.038 32.951 17.365 0 28.421-10.982 47.236-32.951 56.447-21.969-9.211-32.952-28.026-32.952-56.447 10.983-4.327 21.969-10.12 32.952-17.365Z"/><rect fill="#F3F9FF" rx="11.335" height="22.671" width="123.371" y="168.621" x="194.636"/><rect fill="#F3F9FF" rx="11.335" height="22.671" width="67.485" y="208.195" x="194.636"/><rect fill="#F3F9FF" rx="11.335" height="22.671" width="67.485" y="247.245" x="194.636"/><circle fill="#002F5C" r="37.96" cy="223.579" cx="375.88"/><circle fill="#F3F9FF" r="11.072" cy="214.616" cx="375.88"/><path fill="#F3F9FF" d="M367.665 227.27h16.429l3.912 16.344h-24.252l3.911-16.344Z"/><circle fill="#002F5C" r="28.997" cy="334.696" cx="170.383"/><circle fill="#F3F9FF" r="8.458" cy="327.85" cx="170.384"/><path fill="#F3F9FF" d="M164.109 337.516h12.55l2.988 12.485h-18.526l2.988-12.485Z"/><g clip-path="url(#ebd1c__a)"><path fill="#F3F9FF" d="M350.998 357.162h-4.513v-5.265c0-1.146.227-2.215.681-3.206a8.298 8.298 0 0 1 1.88-2.614 8.82 8.82 0 0 1 2.83-1.773c1.086-.43 2.274-.645 3.563-.645a8.75 8.75 0 0 1 3.313.645 9.374 9.374 0 0 1 2.83 1.773 8.792 8.792 0 0 1 1.97 2.614c.489.991.734 2.06.734 3.206v5.265h-4.334V352.9c0-1.505-.418-2.669-1.253-3.492-.836-.824-1.97-1.236-3.403-1.236-1.289 0-2.328.412-3.116 1.236-.788.823-1.182 1.987-1.182 3.492v4.262Zm15.437 2.149c.644 0 1.199.232 1.665.698.466.466.698 1.021.698 1.665v11.103c0 .645-.113 1.248-.34 1.809a4.657 4.657 0 0 1-.931 1.468c-.394.418-.86.747-1.397.985a4.311 4.311 0 0 1-1.773.358h-18.086a4.187 4.187 0 0 1-3.098-1.307 4.184 4.184 0 0 1-.86-1.379 4.625 4.625 0 0 1-.304-1.683v-11.354c0-.644.226-1.199.68-1.665a2.215 2.215 0 0 1 1.648-.698h22.098Z"/></g><defs><clipPath id="ebd1c__a"><path transform="translate(337.514 343.659)" fill="#fff" d="M0 0h35.851v35.851H0z"/></clipPath></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame626652 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
